<template>
	<view>
		<view class="order_li ab_shadow" v-for="(item,index) in listData" :key="index" :class="{'on':item.weight==-1}">
			
			<orderListDetails :itemData="item" :type="1"></orderListDetails>
			
			<!-- 按钮 -->
			<view class="li_btn">
				<view class="btn btn_1" @click="confirmClick(item)" v-if="useCustomer.tabCurrent==0 && item.weight!=-1">
					<text class="in">确认送达</text>
					<!-- <text class="iconfont icon-24gf-telephone"></text> -->
				</view>
				<view class="btn btn_2" :class="{'w100':(useCustomer.tabCurrent==1 || item.weight==-1)}" @click="startFun(item)">
					<text class="in">开始导航</text>
					<text class="iconfont icon-daohang"></text>
				</view>
			</view>
			<!-- 按钮 end-->
		</view>

		<!-- 确认收货弹窗 -->
		<confirmPopup></confirmPopup>
		<!-- 确认收货弹窗 -->
		
		<!-- 定位模态框 -->
		<u-modal :show="useCustomer.modalShow" :content="modalContent" showCancelButton @cancel="useCustomer.modalShow=false" @confirm="confirmModal"></u-modal>
		<!-- 定位模态框 end-->
		
		<!-- 弹窗司机留言-->
		<view class="pits" v-if="useCustomer.scriptShow">
			<u-popup :show="useCustomer.scriptShow" :round="10" mode="center" @close="useCustomer.scriptShow=false" closeable>
				<view class="script_class">
					<view class="script_top">司机留言(备注门店密码或者信息)</view>
					<view class="script_content">
						<u--textarea v-model="useCustomer.scriptContent" placeholder="请输入司机留言!" :maxlength="254" focus></u--textarea>
					</view>
					<view class="script_btn">
						<view class="btn" @click="saveFun">保存备注</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 弹窗司机留言end-->

	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	import confirmPopup from "./confirmPopup.vue";//确认收货弹窗组件
	import orderListDetails from "./orderListDetails.vue";//订单详情
	
	//请求接口
	import {
		postOrderStoreLocation,postOrderLogistic
	} from "@/service/pagesA/customer.js"

	//跳转判断
	import {outerHref} from '@/composables/outerHref.js'
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
	
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const UserStore = useUserStore()
	
	//导航
	// #ifdef APP-PLUS
	import {aMapNavi} from '@/composables/aMapNavi.js'
	const {showRoute,startNaviDirectly} = aMapNavi()
	//#endif
	
	const props = defineProps({
		listData:Array
	})

	const modalContent=ref('定位说明:请在门店门口或者道路旁边使用,下次直接送达司机定位位置,误乱用'); //司机准确定位提示语句

	
	//点击送达
	function confirmClick(item){
		useCustomer.confirmData=item;
		useCustomer.showOne=true;
		
	}
	
	//开始导航
	function startFun(item){
		useCustomer.confirmData=item;
		if(item.logistic_address_models==1){ //导航司机定位
			showRoute(item.logistic_lat,item.logistic_lng,item.store_name,item.id);
			// showRoute(29.621889,106.582624,item.store_name,item.id);
		}else{
			showRoute(item.lat,item.lng,item.store_name,item.id);
			// showRoute(29.621889,106.582624,item.store_name,item.id);
		}
		// outerHref('/pagesA/pages/maps/maps?lat='+item.lat+'&lng='+item.lng)
		// console.log(showRoute())
		
		// startNaviDirectly(item.lat,item.lng,item.store_name);
	}
	
	//定位模态框
	function confirmModal(){
		useCustomer.modalShow=false;
		locationClick();
	}
	
	
	//司机定位
	function locationClick(){
		useCustomer.loadingTrue=true;
		let item=useCustomer.locationAddres;
		UserStore.addressGetLocation((res,bloo)=>{
			if(bloo){ //定位成功
				console.log(res,'定位数据')
				let address=res.address.province+res.address.district+res.address.street+res.address.poiName;
				postOrderStoreLocationFun(item.id,parseFloat(res.latitude).toFixed(8),parseFloat(res.longitude).toFixed(8),address);
			}else{ //定位失败
				uni.showToast({title: '定位失败!',icon:'none'});
				useCustomer.loadingTrue=false;
			}
		})
	}
	
	//门店定位请求
	async function postOrderStoreLocationFun(logistic_id,lat,lng,address){
		await postOrderStoreLocation({
			logistic_id,lng,lat,address
		})
		.then((res)=>{
			let nums=useCustomer.listData.findIndex((value) => value.id == logistic_id);
			useCustomer.listData[nums].logistic_address_models=1;
			useCustomer.listData[nums].logistic_address=res.address;
			useCustomer.listData[nums].logistic_lat=lat;
			useCustomer.listData[nums].logistic_lng=lng;
			uni.showToast({title: '定位成功!',icon:'none',duration:1000});
		})
		.finally(()=>{
			useCustomer.loadingTrue=false;
		})
	}
	
	//留言保存
	async function postOrderLogisticFun(id,remark){
		await postOrderLogistic({
			logistic_id:id,
			remark:remark
		})
		.then((res)=>{
			let nums=useCustomer.listData.findIndex((value) => value.id == id);
			useCustomer.listData[nums].remark=res.remark;
		})
		.finally(()=>{
			useCustomer.loadingTrue=false;
			useCustomer.scriptShow=false;
		})
	}
	
	//留言保存
	function saveFun(){
		useCustomer.loadingTrue=true;
		postOrderLogisticFun(useCustomer.scriptShowId,useCustomer.scriptContent);
	}

</script>

<style lang="scss" scoped>
.order_li{
	padding: 20rpx;
	margin: 0 20rpx;
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: 14rpx;
	display: flex;
	flex-direction: column;
	//box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	
}

.ab_shadow{
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	background: #fff;
}
.ab_shadow.on{
	background: #f5f5f5;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.2);
}
.li_btn{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 30rpx;
	margin-bottom: 10rpx;
	.btn{
		background: #FFF2DA;
		padding: 16rpx 0rpx;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		transition: 0.3s all;
		.in{
			font-size: 30rpx;
			color: #fff;
			font-weight: 700;
		}
		.iconfont{
			font-size: 36rpx;
			width: 40rpx;
			height: 40rpx;
			color: #FA3656;
			margin-left: 20rpx;
		}
	}
	.btn_1{
		width: 40%;
		background: radial-gradient(circle, #ebebeb, #FFF2D1);
		.in{
			color: #FD7722;
		}
	}
	.btn_1:active{
		background: radial-gradient(circle, #FFF2D1, #f3e0af);
	}
	.btn_2{
		width: 50%;
		background: radial-gradient(circle, #54d38a, #16BB5D);
		.iconfont{
			font-size: 40rpx;
			color: #fff;
			margin-left: 14rpx;
		}
	}
	.btn_2.w100{
		width: 100%;
	}
	.btn_2:active{
		background: radial-gradient(circle, #16BB5D, #079f48);
	}
}

:deep(.u-modal__content__text){
	font-size: 30rpx;
	line-height: 60rpx;
	color: #606266;
}

:deep(.pits .u-popup__content){
	width: 80%;
}
.script_class{
	padding: 30rpx;
	.script_top{
		font-size: 26rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}
	.script_btn{
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		justify-content:center;
		.btn{
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			width: 50%;
			background-image: repeating-linear-gradient(90deg, #f7853d,#FD7722);
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
		}
	}
}
	
</style>
